<template>
  <div class="app-container">
    <section>
      <div class="contentBox">
        <div class="title">
          <span>{{ $route.query.title }}</span>
        </div>
        <div class="content">
          <el-form ref="form" :model="form" class="form" label-width="130px">
            <el-form-item label="门店:">
              <el-select
                v-model="form.store_id"
                placeholder="请选择"
                style="width: 250px"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="配置名称：">
              <el-input v-model="form.title" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="岗位等级:">
              <el-select
                v-model="form.position_id"
                placeholder="请选择"
                style="width: 250px"
              >
                <el-option
                  v-for="item in PositionList"
                  :key="item.id"
                  :label="item.gradeName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="提成方式:" prop="type" style="width: 100%">
              <el-select
                @change="changeKind"
                style="width: 250px"
                v-model="form.type"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in typeList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否有附加提成:" style="width: 100%">
              <el-radio-group v-model="form.is_attach">
                <el-radio label="0">否</el-radio>
                <el-radio label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否有点钟费:" style="width: 100%">
              <el-radio-group v-model="form.is_clock">
                <el-radio label="0">否</el-radio>
                <el-radio label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否有点钟奖励:" style="width: 100%">
              <el-radio-group v-model="form.is_reward">
                <el-radio label="0">否</el-radio>
                <el-radio label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="基础提成制度："
              style="width: 100%"
            ></el-form-item>
            <el-form-item class="mrginLeft" style="width: 100%">
              <div class="kindWrap">
                <p>提成方式</p>
                <p>项目名称</p>
                <p>正常</p>
                <p>加班1轮钟</p>
                <p>加班1点钟</p>
                <p>加班2轮钟</p>
                <p>加班2点钟</p>
              </div>
            </el-form-item>
            <template v-if="form.type == 1">
              <el-form-item
                style="width: 100%"
                class="mrginLeft"
                v-for="(ele, index) in system1"
                :key="'E' + index"
              >
                <div class="contentsList">
                  <div class="">
                    <p style="width: 140px">百分比提成</p>
                  </div>
                  <div>
                    <el-select
                      v-model="ele.project_id"
                      placeholder="请选择"
                      @change="projectChange($event, 1)"
                    >
                      <el-option
                        v-for="item in projectList1"
                        :key="item.id"
                        :disabled="item.disabled"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </div>
                  <div class="shortInput">
                    <el-input v-model="ele.normal"></el-input>
                    <span>%</span>
                  </div>
                  <div class="shortInput">
                    <el-input v-model="ele.upper_clock_one"></el-input>
                    <span>%</span>
                  </div>
                  <div class="shortInput">
                    <el-input v-model="ele.spot_clock_one"></el-input>
                    <span>%</span>
                  </div>
                  <div class="shortInput">
                    <el-input v-model="ele.upper_clock_two"></el-input>
                    <span>%</span>
                  </div>
                  <div class="shortInput">
                    <el-input v-model="ele.spot_clock_two"></el-input>
                    <span>%</span>
                  </div>
                  <div class="shortInput">
                    <i
                      class="el-icon-circle-plus-outline"
                      @click="addDetals(1)"
                    ></i>
                    <i
                      class="el-icon-remove-outline"
                      @click="del(index, 1)"
                    ></i>
                  </div>
                </div>
              </el-form-item>
            </template>
            <el-form-item
              v-else
              style="width: 100%"
              class="mrginLeft"
              v-for="(ele, index) in system2"
              :key="'W' + index"
            >
              <div class="contentsList">
                <div class="">
                  <p style="width: 140px">时长提成</p>
                </div>
                <div>
                  <el-select
                    v-model="ele.project_id"
                    @change="projectChange($event, 2)"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in projectList2"
                      :key="item.id"
                      :disabled="item.disabled"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </div>
                <div class="shortInput">
                  <el-input v-model="ele.normal"></el-input>
                  <span>/分钟</span>
                </div>
                <div class="shortInput">
                  <el-input v-model="ele.upper_clock_one"></el-input>
                  <span>/分钟</span>
                </div>
                <div class="shortInput">
                  <el-input v-model="ele.spot_clock_one"></el-input>
                  <span>/分钟</span>
                </div>
                <div class="shortInput">
                  <el-input v-model="ele.upper_clock_two"></el-input>
                  <span>/分钟</span>
                </div>
                <div class="shortInput">
                  <el-input v-model="ele.spot_clock_two"></el-input>
                  <span>/分钟</span>
                </div>
                <div class="shortInput">
                  <i
                    class="el-icon-circle-plus-outline"
                    @click="addDetals(2)"
                  ></i>
                  <i class="el-icon-remove-outline" @click="del(index, 2)"></i>
                </div>
              </div>
            </el-form-item>
            <el-form-item
              class="mrginLeft"
              style="width: 100%"
              v-if="form.is_attach == 1 || form.is_clock == 1"
            >
              <div class="kindWrap">
                <p>提成方式</p>
                <p>项目名称</p>
                <p>费用</p>
              </div>
            </el-form-item>
            <template v-if="form.is_attach == 1">
              <el-form-item
                style="width: 100%"
                class="mrginLeft"
                v-for="(ele, index) in system3"
                :key="'Q' + index"
              >
                <div class="contentsList">
                  <div class="">
                    <p style="width: 140px">附加提成</p>
                  </div>
                  <div>
                    <el-select
                      v-model="ele.project_id"
                      @change="projectChange($event, 3)"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in projectList3"
                        :key="item.id"
                        :disabled="item.disabled"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </div>
                  <div class="shortInput">
                    <el-input v-model="ele.normal"></el-input>
                    <span>/个</span>
                  </div>
                  <div class="shortInput">
                    <i
                      class="el-icon-circle-plus-outline"
                      @click="addDetals(3)"
                    ></i>
                    <i
                      class="el-icon-remove-outline"
                      @click="del(index, 3)"
                    ></i>
                  </div>
                </div>
              </el-form-item>
            </template>
            <template v-if="form.is_clock == 1">
              <el-form-item
                style="width: 100%"
                class="mrginLeft"
                v-for="(ele, index) in system4"
                :key="index"
              >
                <div class="contentsList">
                  <div class="">
                    <p style="width: 140px">点钟费</p>
                  </div>
                  <div>
                    <el-select
                      v-model="ele.project_id"
                      placeholder="请选择"
                      @change="projectChange($event, 4)"
                    >
                      <el-option
                        v-for="item in projectList4"
                        :key="item.id"
                        :label="item.name"
                        :disabled="item.disabled"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </div>
                  <div class="shortInput">
                    <el-input v-model="ele.normal"></el-input>
                    <span>/个</span>
                  </div>
                  <div class="shortInput">
                    <i
                      class="el-icon-circle-plus-outline"
                      @click="addDetals(4)"
                    ></i>
                    <i
                      class="el-icon-remove-outline"
                      @click="del(index, 4)"
                    ></i>
                  </div>
                </div>
              </el-form-item>
            </template>
          </el-form>
          <div style="margin-top: 40px">
            <el-button type="primary" style="width: 143px" @click="save"
              >保存</el-button
            >
            <el-button style="width: 143px" @click="$router.go(-1)"
              >取消</el-button
            >
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value1: false,
      options: [],
      list: [{}],
      system1: [
        {
          project_id: "",
          type: "1",
          normal: "",
          upper_clock_one: "",
          spot_clock_one: "",
          upper_clock_two: "",
          spot_clock_two: "",
        },
      ],
      system2: [
        {
          project_id: "",
          type: "2",
          normal: "",
          upper_clock_one: "",
          spot_clock_one: "",
          upper_clock_two: "",
          spot_clock_two: "",
        },
      ],
      system3: [
        {
          project_id: "",
          type: "3",
          normal: "",
        },
      ],
      system4: [
        {
          project_id: "",
          type: "4",
          normal: "",
        },
      ],
      form: {
        store_id: "",
        title: "",
        position_id: "",
        type: 1,
        is_attach: "0",
        is_clock: "0",
        system: [],
        id: "",
        is_reward: "0",
      },
      typeList: [
        {
          id: 1,
          title: "百分比提成",
        },
        {
          id: 2,
          title: "时长提成",
        },
      ],
      roleList: [],
      PositionList: [],
      projectList1: [],
      projectList2: [],
      projectList3: [],
      projectList4: [],
    };
  },
  computed: {
    typeList2() {
      let list = [
        {
          id: 1,
          title: "百分比提成",
          disabled: false,
        },
        {
          id: 2,
          disabled: false,
          title: "时长提成",
        },
        {
          id: 3,
          disabled: false,
          title: "附加提成",
        },
        {
          id: 4,
          disabled: false,
          title: "点钟费",
        },
      ];
      this.system1.forEach((v) => {
        if (v.type == 1) {
          list[1].disabled = true;
        } else if (v.type == 2) {
          list[0].disabled = true;
        }
      });
      return list;
    },
  },
  async created() {
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id;
      // await this.details()
    }
    await this.getTechPosition();
    await this.homegetStore();
    await this.getPro();
    this.$route.meta.title = this.$route.query.title;
  },
  mounted() {},
  methods: {
    projectChange(e, type) {
      if (type == 1) {
        this.projectList1.forEach((v) => {
          v.disabled = false;
          for (let val of this.system1) {
            if (v.id == val.project_id) {
              v.disabled = true;
            }
          }
        });
      }
      if (type == 2) {
        this.projectList2.forEach((v) => {
          v.disabled = false;
          for (let val of this.system2) {
            if (v.id == val.project_id) {
              v.disabled = true;
            }
          }
        });
      }
      if (type == 3) {
        this.projectList3.forEach((v) => {
          v.disabled = false;
          for (let val of this.system3) {
            if (v.id == val.project_id) {
              v.disabled = true;
            }
          }
        });
      }
      if (type == 4) {
        this.projectList4.forEach((v) => {
          v.disabled = false;
          for (let val of this.system4) {
            if (v.id == val.project_id) {
              v.disabled = true;
            }
          }
        });
      }
    },
    changeKind() {
      if (!this.form.id) {
        this.system1 = this.$options.data().system1;
        this.system2 = this.$options.data().system2;
        this.system3 = this.$options.data().system3;
        this.system4 = this.$options.data().system4;
        this.projectList1.forEach((ele) => {
          ele.disabled = false;
        });
        this.projectList2.forEach((ele) => {
          ele.disabled = false;
        });
      }
    },
    addDetals(type) {
      if (type == 1) {
        let obj = {
          project_id: "",
          type: "1",
          normal: "",
          upper_clock_one: "",
          spot_clock_one: "",
          upper_clock_two: "",
          spot_clock_two: "",
        };
        this.system1.push(obj);
      } else if (type == 2) {
        let obj = {
          project_id: "",
          type: "2",
          normal: "",
          upper_clock_one: "",
          spot_clock_one: "",
          upper_clock_two: "",
          spot_clock_two: "",
        };
        this.system2.push(obj);
      } else if (type == 3) {
        let obj1 = {
          project_id: "",
          type: 3,
          normal: "",
        };
        this.system3.push(obj1);
      } else {
        let obj1 = {
          project_id: "",
          type: 4,
          normal: "",
        };
        this.system4.push(obj1);
      }
    },
    del(index, type) {
      if (type == 1) {
        if (this.system1.length <= 1) {
          this.$message.error("至少保留一个选项");
          return;
        }
        this.projectList1.forEach((v) => {
          if (v.id == this.system1[index].project_id) {
            v.disabled = false;
          }
        });
        this.system1.splice(index, 1);
      }
      if (type == 2) {
        if (this.system2.length <= 1) {
          this.$message.error("至少保留一个选项");
          return;
        }
        this.projectList2.forEach((v) => {
          if (v.id == this.system2[index].project_id) {
            v.disabled = false;
          }
        });
        this.system2.splice(index, 1);
      }
      if (type == 3) {
        if (this.system3.length <= 1) {
          this.$message.error("至少保留一个选项");
          return;
        }
        this.projectList3.forEach((v) => {
          if (v.id == this.system3[index].project_id) {
            v.disabled = false;
          }
        });
        this.system3.splice(index, 1);
      }
      if (type == 4) {
        if (this.system4.length <= 1) {
          this.$message.error("至少保留一个选项");
          return;
        }
        this.projectList4.forEach((v) => {
          if (v.id == this.system4[index].project_id) {
            v.disabled = false;
          }
        });
        this.system4.splice(index, 1);
      }
    },
    async getPro() {
      await this.getProject2();
      await this.getProject3();
      await this.getProject4();
      await this.getProject1();
    },
    // 获取项目
    async getProject1() {
      let { code, data } = await this.$Http.getProject({ is_all: 1 });
      if (code) {
        data.forEach((ele) => {
          ele.disabled = false;
        });
        this.projectList1 = data;
        if (this.form.id) {
          await this.details();
        }
      }
    },
    // 获取项目
    async getProject2() {
      let { code, data } = await this.$Http.getProject({ is_all: 1 });
      if (code) {
        data.forEach((ele) => {
          ele.disabled = false;
        });
        this.projectList2 = data;
      }
    },
    // 获取项目
    async getProject3() {
      let { code, data } = await this.$Http.getProject({ is_all: 1 });
      if (code) {
        data.forEach((ele) => {
          ele.disabled = false;
        });
        this.projectList3 = data;
      }
    },
    // 获取项目
    async getProject4() {
      let { code, data } = await this.$Http.getProject({ is_all: 1 });
      if (code) {
        data.forEach((ele) => {
          ele.disabled = false;
        });
        this.projectList4 = data;
      }
    },
    // 获取门店列表
    async homegetStore() {
      let { code, data } = await this.$Http.homegetStore();
      if (code) {
        this.options = data;
      }
    },
    async getTechPosition() {
      let { code, data } = await this.$Http.getTechPosition();
      if (code) {
        data.forEach((ele) => {
          let obj = {
            gradeName: ele.title + "(" + ele.grade + ")",
            id: ele.id,
          };
          this.PositionList.push(obj);
        });
        // this.PositionList = data;
      }
    },
    add() {
      this.list.push({});
    },
    dele(index) {
      this.list.splice(index, 1);
    },
    async details() {
      let { data } = await this.$Http.getRoyaltyTech({ id: this.form.id });
      this.form.is_attach = JSON.stringify(data.is_attach);
      this.form.is_clock = JSON.stringify(data.is_clock);
      this.form.is_reward = JSON.stringify(data.is_reward);
      this.form.position_id = data.position_id;
      this.form.type = data.type;
      this.form.title = data.title;
      this.form.store_id = data.store_id;
      this.form.id = data.id;
      let arr = [];
      if (this.form.type == 1) {
        this.system1 = [];
        data.info[1].forEach((ele) => {
          let obj = {
            project_id: ele.project_id,
            type: ele.type,
            normal: ele.normal,
            upper_clock_one: ele.upper_clock_one,
            spot_clock_one: ele.spot_clock_one,
            upper_clock_two: ele.upper_clock_two,
            spot_clock_two: ele.spot_clock_two,
          };
          this.projectList1.forEach((v) => {
            if (v.id == ele.project_id) {
              v.disabled = true;
            }
          });
          this.system1.push(obj);
        });
      }
      if (this.form.type == 2) {
        this.system2 = [];
        data.info[2].forEach((ele) => {
          let obj = {
            project_id: ele.project_id,
            type: ele.type,
            normal: ele.normal,
            upper_clock_one: ele.upper_clock_one,
            spot_clock_one: ele.spot_clock_one,
            upper_clock_two: ele.upper_clock_two,
            spot_clock_two: ele.spot_clock_two,
          };
          this.projectList2.forEach((v) => {
            if (v.id == ele.project_id) {
              v.disabled = true;
            }
          });
          this.system2.push(obj);
        });
      }
      if (this.form.is_attach == 1) {
        this.system3 = [];
        data.info[3].forEach((ele) => {
          let obj = {
            project_id: ele.project_id,
            type: ele.type,
            normal: ele.normal,
          };
          this.projectList3.forEach((v) => {
            if (v.id == ele.project_id) {
              v.disabled = true;
            }
          });
          this.system3.push(obj);
        });
      }
      if (this.form.is_clock == 1) {
        console.log(this.form.is_clock, "this.form.is_clock55555");
        this.system4 = [];
        data.info[4].forEach((ele) => {
          let obj = {
            project_id: ele.project_id,
            type: ele.type,
            normal: ele.normal,
          };
          console.log(ele, "ddd");
          this.projectList4.forEach((v) => {
            if (v.id == ele.project_id) {
              v.disabled = true;
            }
          });
          this.system4.push(obj);
        });
      }
      console.log(this.form.is_clock, "this.form.is_clock");
    },
    async save() {
      if (!this.form.store_id) {
        this.$message.error("请选择门店");
        return;
      }
      if (!this.form.title) {
        this.$message.error("请输入配置名称");
        return;
      }
      if (!this.form.position_id) {
        this.$message.error("请选择岗位等级");
        return;
      }
      if (this.form.type == 1) {
        for (let index = 0; index < this.system1.length; index++) {
          let ele = this.system1[index];
          if (!ele.project_id) {
            this.$message.error("请选择项目");
            return;
          }
          if (!ele.normal) {
            this.$message.error("请输入提成比列");
            return;
          }
          if (!ele.upper_clock_one) {
            this.$message.error("请输入加班1轮钟");
            return;
          }
          if (!ele.spot_clock_one) {
            this.$message.error("请输入加班1点钟");
            return;
          }
          if (!ele.upper_clock_two) {
            this.$message.error("请输入加班2轮钟");
            return;
          }
          if (!ele.spot_clock_two) {
            this.$message.error("请输入加班2点钟");
            return;
          }
        }
      } else if (this.form.type == 2) {
        for (let index = 0; index < this.system2.length; index++) {
          let ele = this.system2[index];
          if (!ele.project_id) {
            this.$message.error("请选择项目");
            return;
          }
          if (!ele.normal) {
            this.$message.error("请输入提成金额");
            return;
          }
          if (!ele.upper_clock_one) {
            this.$message.error("请输入加班1轮钟");
            return;
          }
          if (!ele.spot_clock_one) {
            this.$message.error("请输入加班1点钟");
            return;
          }
          if (!ele.upper_clock_two) {
            this.$message.error("请输入加班2轮钟");
            return;
          }
          if (!ele.spot_clock_two) {
            this.$message.error("请输入加班2点钟");
            return;
          }
        }
      } else if (this.form.is_attach == 1) {
        for (let index = 0; index < this.system3.length; index++) {
          let ele = this.system3[index];
          if (!ele.project_id) {
            this.$message.error("请选择项目");
            return;
          }
          if (!ele.normal) {
            this.$message.error("请输入提成金额");
            return;
          }
        }
      } else if (this.form.is_clock == 1) {
        for (let index = 0; index < this.system4.length; index++) {
          let ele = this.system4[index];
          if (!ele.project_id) {
            this.$message.error("请选择项目");
            return;
          }
          if (!ele.normal) {
            this.$message.error("请输入提成金额");
            return;
          }
        }
      }
      let arr = [];
      if (this.form.type == 1) {
        if (this.form.is_attach == 1 && this.form.is_clock == 1) {
          console.log(1);
          arr = [...this.system1, ...this.system3, ...this.system4];
        } else if (this.form.is_attach == 1) {
          console.log(2);
          arr = [...this.system1, ...this.system3];
        } else if (this.form.is_clock == 1) {
          console.log(3);
          arr = [...this.system1, ...this.system4];
        } else {
          console.log(4);
          arr = this.system1;
        }
        console.log(arr, "arrarrarrarr");
      } else {
        if (this.form.is_attach == 1 && this.form.is_clock == 1) {
          arr = [...this.system2, ...this.system3, ...this.system4];
        } else if (this.form.is_attach == 1) {
          arr = [...this.system2, ...this.system3];
        } else if (this.form.is_clock == 1) {
          arr = [...this.system2, ...this.system4];
        } else {
          arr = this.system2;
        }
      }
      this.form.system = JSON.stringify(arr);
      let { code } = await this.$Http.setRoyaltyTech(this.form);
      if (code) {
        if (this.form.id) {
          this.$message.success("编辑成功");
        } else {
          this.$message.success("添加成功");
        }
        this.$router.go(-1);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  section {
    .mrginLeft {
      ::v-deep {
        .el-form-item__content {
          margin-left: 0 !important;
        }
      }
    }
    .kindWrap {
      display: flex;
      p {
        width: 140px;
        margin: 0;
        margin-right: 20px;
        text-align: center;
      }
      p:nth-child(2) {
        width: 200px;
      }
    }
    .contentsList {
      display: flex;
      p {
        width: 140px;
        margin: 0;
        text-align: center;
      }
      > div {
        margin-right: 20px;
      }
      ::v-deep {
        .el-input,
        .el-select {
          width: 200px;
        }
      }
      .shortInput {
        width: 140px;
        display: flex;
        align-content: center;
        .el-input {
          width: 95px;
          margin-right: 10px;
        }
        i {
          margin-top: 6px;
        }
      }
    }
    .contentBox {
      background: #fff;
      border-radius: 8px;
      padding: 0px 24px 20px;
      min-height: calc(100vh - 165px);
      .title {
        line-height: 70px;
        font-size: 18px;
        font-weight: 600;
        color: #383b40;
        .el-icon-close {
          cursor: pointer;
        }
      }
    }
    .content {
      height: 100%;
      .form {
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-between;
      }
    }
  }
}
::v-deep {
  .el-input {
    width: 250px;
  }
  .el-icon-circle-plus-outline,
  .el-icon-remove-outline {
    color: #999;
    font-size: 26px;
    margin: 0 5px;
  }
  .el-icon-circle-plus-outline {
    margin-left: 20px;
  }
  .el-icon-remove-outline {
    color: #f00;
  }
  .el-form-item__content {
    display: flex;
    align-items: center;
  }
  .el-radio-group {
    margin-top: 10px;
  }
}
</style>